<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>5725宿舍生活网站-宿舍生活</title>
		<style>
			/* 全局样式 */
			body {
				font-family: '微软雅黑', sans-serif;
				margin: 0;
				padding: 0;
				background-color: #f4f4f4;
				color: #333;
			}

			/* 头部样式 */
			header {
				background-color: #00f7ff;
				padding: 10px 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			header .logo {
				font-family: '手写体', cursive;
				font-size: 24px;
				color: #fff;
			}

			nav ul {
				list-style: none;
				margin: 0;
				padding: 0;
				display: flex;
			}

			nav ul li {
				margin-left: 20px;
			}

			nav ul li a {
				text-decoration: none;
				color: #fff;
				font-size: 18px;
			}

			/* Banner样式 */
			.banner .slider {
				display: flex;
				overflow: hidden;
			}

			.banner .slider img {
				width: 100%;
				height: auto;
			}

			/* 主要内容区域样式 */
			.main-content {
				padding: 20px;
			}

			.main-content h2 {
				font-family: '卡通字体', cursive;
				color: #333;
			}

			.gallery {
				display: flex;
				gap: 10px;
			}

			.gallery img {
				width: 48%;
				height: auto;
			}

			/* 底部样式 */
			footer {
				background-color: #333;
				color: #fff;
				text-align: center;
				padding: 10px 0;
				margin-top: 20px;
			}

			/* 新增互动功能样式 */
			.interaction-section {
				margin: 20px 0;
				padding: 20px;
				background-color: white;
				border-radius: 8px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			}

			.vote-options {
				display: flex;
				gap: 15px;
				margin: 15px 0;
				flex-wrap: wrap;
			}

			.message-board {
				margin-top: 20px;
			}

			.message-item {
				border-bottom: 1px solid #eee;
				padding: 15px;
				margin: 10px 0;
				background-color: #fff;
				border-radius: 5px;
			}

			.message-author {
				color: #ffa500;
				font-weight: bold;
				margin-bottom: 5px;
			}

			.results-bar {
				height: 20px;
				background-color: #eee;
				border-radius: 10px;
				margin: 10px 0;
				overflow: hidden;
			}

			.results-fill {
				height: 100%;
				background-color: #ffa500;
				transition: width 0.3s ease;
			}

			#messageForm {
				display: flex;
				flex-direction: column;
				gap: 10px;
				max-width: 600px;
			}

			#author,
			#message {
				padding: 10px;
				border: 1px solid #ddd;
				border-radius: 4px;
				font-size: 16px;
			}

			#message {
				height: 100px;
				resize: vertical;
			}

			button {
				background-color: #ffa500;
				color: white;
				border: none;
				padding: 10px 20px;
				border-radius: 5px;
				cursor: pointer;
				font-size: 16px;
				transition: background-color 0.3s;
			}

			button:hover {
				background-color: #ff8c00;
			}
		</style>
	</head>
	<body>
		<header>
			<div class="logo">5725宿舍生活网站-宿舍生活</div>
			<nav>
				<ul>
					<li><a href="sy.html">首页</a></li>
					<li><a href="ssjs.html">宿舍介绍</a></li>
					<li><a href="sssh.html">宿舍生活</a></li>
					<li><a href="gywm.html">关于我们</a></li>
				</ul>
			</nav>
		</header>

		<section class="banner">
			<div class="slider">

				<!--            <img src="banner2.jpg" alt="室友合照" class="slider-img">
            <img src="banner3.jpg" alt="精彩活动" class="slider-img"> -->
			</div>
		</section>

		<section class="main-content">
			<h2>宿舍日常</h2>
			<p><i>温馨的宿舍日常</i></p>
			<p>在宿舍，每一天都有不同的故事。清晨，阳光透过窗帘洒在床边，室友们的笑声唤醒新的一天。课后，大家围坐在一起，分享美食，讨论学习中的难题。晚上，有人在书桌前埋头苦读，有人在电脑前畅游网络世界。这里充满了青春的活力和温暖的回忆。</p>
			<img src="sssh (1).jpg" alt="宿舍环境" class="slider-img">



			<h2>电竞时刻</h2>
			<p><i>放松和娱乐</i></p>
			<p>在宿舍里，电竞活动是同学们最期待的时刻之一。无论是《英雄联盟》的激烈对决，还是《王者荣耀》的精彩团战，每一次比赛都能点燃大家的热情。我们定期组织宿舍电竞比赛，不仅锻炼了同学们的团队协作能力，还增强了宿舍的凝聚力。</p>
			<img src="sssh (2).jpg" alt="宿舍生活" class="slider-img">


			<!-- 投票功能 -->
			<div class="interaction-section">
				<h2>本周活动投票</h2>
				<div class="vote-options">
					<label>
						<input type="radio" name="vote" value="聚餐"> 周末聚餐
					</label>
					<label>
						<input type="radio" name="vote" value="电影"> 电影之夜
					</label>
					<label>
						<input type="radio" name="vote" value="游戏"> 桌游大赛
					</label>
				</div>
				<button onclick="submitVote()">立即投票</button>
				<div id="voteResults"></div>
			</div>

			<!-- 留言板功能 -->
			<div class="interaction-section message-board">
				<h2>留言板</h2>
				<form id="messageForm" onsubmit="return submitMessage(event)">
					<input type="text" id="author" placeholder="你的昵称（必填）" required>
					<textarea id="message" placeholder="留下你的祝福或建议...（必填）" required></textarea>
					<button type="submit">发布留言</button>
				</form>
				<div id="messagesContainer"></div>
			</div>

			<h2>友情链接</h2>
			<ul>
				<li><a href="https://hceb.edu.cn/">学校网站</a></li>
				<li><a href="https://bilibili.com/">bilibili</a></li>
			</ul>
		</section>

	<!-- 	<footer>
			<p>&copy; 2025 宿舍生活. 版权所有.</p>
			<p>联系方式: dormlife@example.com</p>
		</footer> -->

		<script>
			// 初始化本地存储
			let votes = JSON.parse(localStorage.getItem('votes')) || {
				聚餐: 0,
				电影: 0,
				游戏: 0
			};
			let messages = JSON.parse(localStorage.getItem('messages')) || [];

			// 投票功能
			function submitVote() {
				const selected = document.querySelector('input[name="vote"]:checked');
				if (!selected) return alert('请先选择投票选项！');

				votes[selected.value]++;
				localStorage.setItem('votes', JSON.stringify(votes));
				updateResults();
			}

			function updateResults() {
				const total = Object.values(votes).reduce((a, b) => a + b, 0);
				let html = '';

				Object.entries(votes).forEach(([option, count]) => {
					const percent = total ? (count / total * 100).toFixed(1) : 0;
					html += `
                    <div>${option}: ${count} 票 (${percent}%)</div>
                    <div class="results-bar">
                        <div class="results-fill" style="width: ${percent}%"></div>
                    </div>
                `;
				});

				document.getElementById('voteResults').innerHTML = html;
			}
			// 留言板功能
			function submitMessage(event) {
				event.preventDefault();

				const author = document.getElementById('author').value;
				const content = document.getElementById('message').value;

				const newMessage = {
					author: author,
					content: content,
					time: new Date().toLocaleString()
				};

				messages.unshift(newMessage);
				localStorage.setItem('messages', JSON.stringify(messages));

				renderMessages();
				event.target.reset();
			}

			function renderMessages() {
				const container = document.getElementById('messagesContainer');
				container.innerHTML = messages.map(msg => `
                <div class="message-item">
                    <div class="message-author">${msg.author}</div>
                    <div class="message-content">${msg.content}</div>
                    <div class="message-time" style="color:#666; font-size:0.9em">${msg.time}</div>
                </div>
            `).join('');
			}

			// 初始化加载数据
			window.onload = function() {
				updateResults();
				renderMessages();
			}
		</script>
	</body>
</html>